<template>
  <div class="love-music-player img-cover">
    <div class="audio-container" :class="{ on: music_play }">
      <div class="audio-thumb">
        <img :src="music_thumb" alt="" />
      </div>
      <audio :ref="setItemRef" :src="music_url" preload="metadata"></audio>
      <canvas
        class="audio-canvas-circle"
        width="182"
        height="182"
        :ref="setItemRef"
        @click="click_play"
      ></canvas>
      <canvas
        class="audio-canvas-play-handler"
        :ref="setItemRef"
        width="45"
        height="200"
        @click="click_play"
      ></canvas>
    </div>
  </div>
</template>

<script>
import music from "./love-music-player_func";
export default {
  name: "love-music-player",
  props: {
    music_url: {
      type: String,
      require: false,
      default:
        "https://zhibo-1255979805.cos.ap-shanghai.myqcloud.com/always_rember_us_this_way.7508ceda.mp3",
    },
    music_thumb: {
      type: String,
      require: false,
    },
  },
  data() {
    return {
      //可以是对象, for ref 中的用法
      itemRefs: [], //audio | 1 audioCanvasCircle | 2 audioPlayHandler
      music_play: false,
      currentPlayTime: 0,
    };
  },
  created() {
    var interval;
    var that = this;
    interval = setInterval(function () {
      if (document.readyState == "complete") {
        music.drawAudioArc(that.itemRefs[1]);
        music.drawAudioPlay(that.itemRefs[2]);
        clearInterval(interval);
      }
    }, 500);
    //苹果手机不能自动播放的问题
    var that = this
    document.addEventListener(
      "WeixinJSBridgeReady",
      function () {
        that.click_play();
      },
      false
    );
    
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el);
      }
    },
    click_play() {
      var that = this;
      let audio = this.itemRefs[0];
      if (this.music_play) {
        audio.pause();
        this.music_play = false;
        return;
      }
      this.music_play = true;
      audio.play();
      audio.onended = function () {
        that.music_play = false;
      };
    },
  },
  beforeUpdate() {
    this.itemRefs = [];
  },
  updated() {
    //console.log(this.itemRefs);
  },
};
</script>

<style scoped>
.love-music-player {
  display: inline-block;
  width: 20rem;
  height: 20rem;
  z-index: 9;
}
.audio-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.love-music-player audio {
  display: none;
}
.audio-canvas-circle {
  position: absolute;
  width: 70%;
  height: auto;
}
.audio-thumb {
  width: 36%;
  height: 36%;
  position: absolute;
  border-radius: 100%;
  margin: auto;
  overflow: hidden;
}
.audio-thumb img {
  width: 100%;
  height: auto;
}
.audio-canvas-play-handler {
  position: absolute;
  height: 80%;
  right: 0;
  transform-origin: top center;
  transform: rotate(10deg);
  z-index: 999;
}
.on .audio-canvas-play-handler {
  transform: rotate(27deg);
  transition: all 0.5s;
}
.on .audio-canvas-circle,
.on .audio-thumb {
  animation: circle-run 2.5s linear infinite 0.5s;
}
@keyframes circle-run {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
